<template>
<div v-show="show" class="m-user-control">
    <div class="info">
        <div class="info-content">
            <div>{{ userDetail?.profile.eventCount }}</div>
            <div>动态</div>
        </div>
        <div class="info-content">
            <div>{{ userDetail?.profile.follows }}</div>
            <div>关注</div>
        </div>
        <div class="info-content">
            <div>{{ userDetail?.profile.followeds }}</div>
            <div>粉丝</div>
        </div>
    </div>
    <div class="sign">
        <button :disabled="userDetail?.pcSign" @click.stop="handlerDaily">
            <svg class="icon" fill="currentColor" height="15" version="1.1"
                 viewBox="0 0 1024 1024"
                 width="15" xmlns="http://www.w3.org/2000/svg">
                <path
                        d="M938.666667 746.666667c0 121.6-183.466667 213.333333-426.666667 213.333333S85.333333 868.266667 85.333333 746.666667V277.333333C85.333333 155.733333 268.8 64 512 64s426.666667 91.733333 426.666667 213.333333v469.333334zM170.666667 746.666667c0 51.2 132.266667 128 341.333333 128s341.333333-76.8 341.333333-128v-104.533334c-76.8 51.2-198.4 83.2-341.333333 83.2s-264.533333-32-341.333333-83.2V746.666667z m0-339.2V512c0 51.2 132.266667 128 341.333333 128s341.333333-76.8 341.333333-128v-104.533333c-76.8 51.2-198.4 83.2-341.333333 83.2s-264.533333-32-341.333333-83.2zM512 149.333333c-209.066667 0-341.333333 76.8-341.333333 128s132.266667 128 341.333333 128 341.333333-76.8 341.333333-128-132.266667-128-341.333333-128z"></path>
            </svg>
            {{ userDetail?.pcSign ? '已签到' : '签到' }}
        </button>
    </div>
    <div class="user-options">
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M517.032183 19.734053a493.35132 493.35132 0 1 0 493.351321 493.35132 493.35132 493.35132 0 0 0-493.351321-493.35132z m0 927.500482a434.149162 434.149162 0 1 1 434.149162-434.149162 434.149162 434.149162 0 0 1-434.149162 434.149162z m-31.771825-320.086337h50.913857l28.417036-257.92407H513.085373z m-54.268645-257.92407l-92.750048 193.985739-48.940451-193.985739h-57.426094l72.423974 257.92407H355.21295l133.204857-257.92407z m347.714011 5.722875a148.597418 148.597418 0 0 0-46.177684-4.933513h-119.58836l-28.219695 257.134708h50.913856l9.867026-90.184621h81.896319a116.03623 116.03623 0 0 0 33.153209-4.144151 70.450569 70.450569 0 0 0 24.470226-14.011178 87.619194 87.619194 0 0 0 21.510117-28.811717 109.918674 109.918674 0 0 0 10.853729-36.113317 88.605897 88.605897 0 0 0-5.328194-43.612256A57.623434 57.623434 0 0 0 778.705724 374.947003z m-17.168626 76.962806a48.348429 48.348429 0 0 1-14.80054 33.745231 45.190981 45.190981 0 0 1-26.838312 6.117556H651.223743l7.69628-77.357487H730.159954a45.388321 45.388321 0 0 1 19.734053 2.762767c9.077664 5.525535 13.616496 16.971285 11.643091 33.942571z"></path>
                </svg>
                会员中心
            </div>
            <div>
                未订购
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M860.16 436.6336a349.8496 349.8496 0 1 0-638.976 196.7616l-103.936 207.5648L277.1968 849.92l98.048 117.1968 101.632-182.2208c11.0592 1.024 22.1696 1.6384 33.4848 1.6384a354.6112 354.6112 0 0 0 39.2192-2.2528L650.24 967.3216 748.4416 849.92l159.6928-8.96-105.1648-212.8384A347.6992 347.6992 0 0 0 860.16 436.6336z m-495.104 422.5536L307.2 790.0672l-93.184-5.12 50.0736-99.8912a350.1056 350.1056 0 0 0 149.1968 87.7568zM221.952 436.6336a288.4096 288.4096 0 1 1 288.4096 288.4608 288.7168 288.7168 0 0 1-288.4096-288.4608z m589.9264 348.16l-93.44 5.12-57.6512 68.9152-48.2816-87.7056A350.5664 350.5664 0 0 0 760.5248 680.96z"></path>
                    <path
                            d="M510.3616 243.3536a193.3312 193.3312 0 1 0 193.3312 193.28 193.4848 193.4848 0 0 0-193.3312-193.28z m0 325.1712a131.8912 131.8912 0 1 1 131.8912-131.8912A131.9936 131.9936 0 0 1 510.3616 568.32z"></path>
                </svg>
                等级
            </div>
            <div>
                Lv.{{ userDetail?.level }}
                <svg class="icon" height="12" version="1.1" viewBox="0 0 1024 1024" width="12"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M753.237333 938.666667H270.762667a63.829333 63.829333 0 0 1-63.146667-53.376L135.808 372.138667A64 64 0 0 1 199.082667 298.666667h625.834666a64 64 0 0 1 63.274667 73.770666l-71.765333 512.256A64 64 0 0 1 753.237333 938.666667zM199.082667 341.333333a21.333333 21.333333 0 0 0-21.12 24.576l71.850666 512.853334a21.162667 21.162667 0 0 0 20.949334 17.237333h482.474666a21.290667 21.290667 0 0 0 21.034667-17.792l71.68-512a21.162667 21.162667 0 0 0-4.821333-17.408 20.906667 20.906667 0 0 0-16.213334-7.466667z"></path>
                    <path
                            d="M704 405.333333A21.333333 21.333333 0 0 1 682.666667 384V296.704a170.666667 170.666667 0 0 0-341.333334 0V384a21.333333 21.333333 0 0 1-42.666666 0V296.704a213.333333 213.333333 0 0 1 426.666666 0V384a21.333333 21.333333 0 0 1-21.333333 21.333333z"></path>
                </svg>
                商城
            </div>
            <div>
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
    </div>
    <div class="user-options">
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M932.56362529 855.87499971h-305.1c-14.69999971 0-29.40000029-14.69999971-29.40000029-29.39999942s14.69999971-29.40000029 29.40000029-29.40000029h305.1c19.575 0 29.40000029 14.69999971 29.39999942 29.40000029s-14.69999971 29.40000029-29.39999942 29.39999942z m0-93.07499942h-305.1c-14.69999971 0-29.40000029-14.69999971-29.40000029-29.40000029 0-19.575 14.69999971-29.3625 29.40000029-29.3625h305.1c14.69999971 0 29.40000029 14.69999971 29.39999942 29.3625 0 14.69999971-14.69999971 29.40000029-29.39999942 29.40000029z m-163.0125-132.48750058a29.17500029 29.17500029 0 0 1-20.25-8.06249971l-1.50000029-1.27500029a387.63749971 387.63749971 0 0 0-235.4625-79.38749971c-215.775 0-391.31250029 175.42500029-391.31250029 391.01249971a29.54999971 29.54999971 0 0 1-29.51249942 29.3625 29.5875 29.5875 0 0 1-29.51250029-29.43749971 445.98750029 445.98750029 0 0 1 81.29999971-257.47499971 450.37500029 450.37500029 0 0 1 208.0125-162.26250029l27-10.35-21.9375-18.82500029a239.36249971 239.36249971 0 0 1-83.96249942-181.9125C272.41362529 169.55 380.038625 62 512.338625 62c132.3 0 239.9625 107.55 239.9625 239.69999971a239.36249971 239.36249971 0 0 1-83.96250029 181.9125l-21.97499942 18.82500029 27.03749942 10.35c37.64999971 14.4 73.4625 34.01250029 106.46250029 58.3875l8.02500029 6.56250029a29.32499971 29.32499971 0 0 1 11.17499942 23.0625 29.62500029 29.62500029 0 0 1-29.51249942 29.51249942z m-76.275-328.6125a181.0125 181.0125 0 0 0-180.93750029-180.71249942 181.0125 181.0125 0 0 0-180.9 180.71249942 181.0125 181.0125 0 0 0 180.9 180.75000058 181.0125 181.0125 0 0 0 180.93750029-180.75000058z m-65.8125 593.36250029h305.1c19.575 0 29.40000029 14.66250029 29.39999942 29.3625s-14.69999971 29.40000029-29.39999942 29.40000029h-305.1c-14.69999971 0-29.40000029-14.69999971-29.40000029-29.40000029s14.69999971-29.3625 29.40000029-29.3625z"></path>
                </svg>
                个人信息设置
            </div>
            <div>
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M580.9 702.3c-69.5 0-134.7-26.9-183.5-75.7-29.3-29.3-51.3-65.6-63.7-105-5.3-16.9 4.1-34.8 20.9-40.1 16.9-5.3 34.8 4.1 40.1 20.9 9.5 30.1 25.6 56.6 47.9 78.9 76.2 76.2 200.2 76.2 276.5 0L903 397.5c76.2-76.2 76.2-200.2 0-276.5-36.7-36.7-85.8-57-138.2-57-52.4 0-101.5 20.2-138.2 57l-130 130c-12.5 12.5-32.8 12.5-45.3 0-12.5-12.5-12.5-32.8 0-45.3l130-130C630.1 26.9 695.3 0 764.8 0c69.5 0 134.7 26.9 183.5 75.7 48.8 48.8 75.7 114 75.7 183.5s-26.9 134.7-75.7 183.5L764.4 626.5C715.6 675.4 650.4 702.3 580.9 702.3z"></path>
                    <path
                            d="M259.2 1024c-69.5 0-134.7-26.9-183.5-75.7C26.9 899.4 0 834.3 0 764.8c0-69.5 26.9-134.7 75.7-183.5l183.8-183.8c48.8-48.8 114-75.7 183.5-75.7 69.5 0 134.7 26.9 183.5 75.7 29.3 29.3 51.3 65.6 63.7 105 5.3 16.9-4.1 34.8-20.9 40.1-16.9 5.3-34.8-4.1-40.1-20.9-9.5-30.1-25.6-56.6-47.9-78.9-36.7-36.7-85.8-57-138.2-57-52.4 0-101.5 20.2-138.2 57L121 626.5c-36.7 36.7-57 85.8-57 138.2 0 52.4 20.2 101.5 57 138.2 76.2 76.2 200.2 76.2 276.5 0l130-130c12.5-12.5 32.8-12.5 45.3 0 12.5 12.5 12.5 32.8 0 45.3l-130 130C393.9 997.1 328.7 1024 259.2 1024z"></path>
                </svg>
                绑定社交帐号
            </div>
            <div>
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
    </div>
    <div class="user-options">
        <div class="item">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1051 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M55.351351 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0z m763.101406 211.552865A137.852541 137.852541 0 0 1 774.918919 664.326919v-110.924108A138.378378 138.378378 0 0 1 912.328649 415.135135C898.131027 214.071351 730.499459 55.351351 525.837838 55.351351 321.148541 55.351351 153.544649 214.071351 139.347027 415.135135A138.461405 138.461405 0 0 1 276.756757 553.402811v110.924108a138.378378 138.378378 0 0 1-276.756757 0v-110.924108a138.378378 138.378378 0 0 1 83.303784-126.865297C91.883243 189.523027 286.72 0 525.837838 0s433.954595 189.523027 442.534054 426.537514A138.461405 138.461405 0 0 1 1051.675676 553.402811v110.924108a138.378378 138.378378 0 0 1-184.790487 130.269405 470.763243 470.763243 0 0 1-188.858811 121.21946A96.809514 96.809514 0 0 1 580.912432 1010.162162h-82.528864c-53.690811 0-97.113946-43.174054-97.113946-96.864865 0-53.607784 43.284757-96.864865 97.141621-96.864865h82.473514c34.954378 0 65.536 18.265946 82.639567 45.803244a415.273514 415.273514 0 0 0 154.900757-97.28zM830.27027 553.402811v110.924108a83.027027 83.027027 0 0 0 166.054054 0v-110.924108a83.027027 83.027027 0 0 0-166.054054 0zM498.438919 954.810811h82.473513c23.302919 0 41.79027-18.487351 41.790271-41.513514 0-23.053838-18.570378-41.513514-41.790271-41.513513h-82.473513c-23.302919 0-41.79027 18.487351-41.79027 41.513513 0 23.053838 18.570378 41.513514 41.79027 41.513514z"></path>
                </svg>
                我的客服
            </div>
            <div>
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
    </div>
    <div class="user-options">
        <div class="item" @click.stop="handlerLogout">
            <div>
                <svg class="icon" fill="currentColor" height="20" version="1.1"
                     viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M705.6 124.9c-5.3-2.7-11.6 1.2-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6 22.4 14.1 43.2 30.7 62.2 49.8 32.7 32.8 58.4 70.9 76.3 113.3 18.5 43.9 27.9 90.5 27.9 138.7 0 48.1-9.4 94.8-27.9 138.7-17.9 42.4-43.6 80.5-76.3 113.3-32.7 32.8-70.8 58.5-113.2 76.4-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28c-42.4-17.9-80.5-43.6-113.2-76.4-32.7-32.8-58.4-70.9-76.3-113.3-18.5-43.9-27.9-90.5-27.9-138.7 0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 0.5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7z"></path>
                    <path d="M480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path>
                </svg>
                退出登录
            </div>
            <div>
                <svg class="icon" height="12px" version="1.1" viewBox="0 0 1024 1024" width="12px"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M302.708 187.56c-17.184-17.528-16.906-45.668 0.622-62.852 17.528-17.184 45.668-16.906 62.852 0.622l355.554 362.666c17.186 17.53 16.906 45.676-0.628 62.858L365.552 899.298c-17.53 17.18-45.67 16.896-62.85-0.634-17.18-17.532-16.896-45.67 0.634-62.852l323.806-317.33L302.708 187.56z"
                            fill="currentColor"></path>
                </svg>
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
import {computed, ComputedRef} from 'vue'
import {getCookieStore, getMySongListStore, getUserStore} from '@/store'
import {UserDetail} from '@/types'
import {daily, logout} from '@/api/user'

interface Props {
  show: boolean
}

defineProps<Props>()

interface Emits {
  (event: 'update:show', value: boolean): void
}

const emits = defineEmits<Emits>()

const userStore = getUserStore()
const cookieStore = getCookieStore()
const mySongListStore = getMySongListStore()

const userDetail: ComputedRef<UserDetail | undefined> = computed(() => userStore.getUserDetail)

function handlerDaily() {
  daily().then(() => {
    alert('签到成功')
    userStore.fetchUserInfo()
  }).catch(() => {
    alert('重复签到')
  })
}


function handlerLogout() {
  logout()
    .then(() => cookieStore.clearCookie())
    .then(() => userStore.clearUserInfo())
    .then(() => mySongListStore.clearMySongList())
    .then(() => {
      alert('退出成功')
      emits('update:show', false)
    })
    .catch((err) => {
      alert(err)
      console.log(err)
    })
}

</script>

<style lang="less" scoped>
.m-user-control {
  * {
    user-select: none;
  }

  width: 282px;
  background-color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: -100%;
  z-index: 9999;
  color: black;
  box-shadow: 0 0 5px #ddd;
  box-sizing: border-box;
  padding: 10px 0;

  .info {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
  }

  .info-content {
    div {
      text-align: center;
    }

    div:nth-child(1) {
      font-size: 20px;
    }
  }

  .sign {
    margin-top: 20px;
    font-size: 13px;
    margin-bottom: 20px;
    text-align: center;

    button {
      color: rgb(51, 51, 51);
      border-style: solid;
      border-radius: 20px;
      border-width: 1px;
      border-color: rgb(221, 221, 221);
      background-color: white;
      padding: 4px 15px;

      &:not(:disabled):hover {
        background-color: rgb(242, 242, 242);
      }
    }

    svg.icon {
      position: relative;
      top: -2px;
    }
  }

  .user-options {
    border-top: 1px solid rgb(237, 237, 237);
    display: flex;
    flex-direction: column;

    .item {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      font-size: 14px;

      &:hover {
        background-color: rgb(241, 242, 243);
      }

      div:nth-child(2) {
        font-size: 12px;
        color: rgb(200, 200, 200);
      }

      svg.icon {
        position: relative;
        top: -1px;
        color: rgb(90, 90, 90);
      }
    }
  }
}
</style>
